<template>
  <div class="app-container">
    <div class="head-container">
      <div class="card-header">
        <div>
          <label class="el-form-item-label">涨幅大于</label>
          <el-input v-model="changeRate" clearable placeholder="涨跌幅" style="width: 185px;" class="filter-item" />
          <label class="el-form-item-label">量比倍数</label>
          <el-input
            v-model="aountMultiple"
            clearable
            placeholder="交易额对比倍数"
            style="width: 185px;"
            class="filter-item"
          />
          <el-button type="primary" class="filter-item" size="mini" icon="el-icon-search" @click="updateLongLetStock">重新更新信息</el-button>
        </div>
      </div>
    </div>
    <!-- 模态框背景遮罩层 -->
    <div v-if="showModal" class="modal-overlay" @click="hideModal" />
    <!-- 模态框内容 -->
    <div v-if="showModal" ref="chart" class="modal">
      <kline-chart :chart-data="klineChartParams" :theme="theme" />
    </div>
    <div class="container">
      <div class="box">
        <el-card class="box-card">
          <el-table
            :data="table_data"
            :show-header="true"
            :max-height="500"
            :cell-style="cellStyle"
            stripe
          >
            <el-table-column
              type="index"
              label="序号"
              width="50%"
            />
            <el-table-column
              prop="name"
              label="公司简称"
              width="80%"
            />
            <el-table-column
              prop="changeRate"
              label="涨跌幅%"
              width="80%"
            />
            <el-table-column
              prop="amountMultiple"
              label="交易额(倍)"
              width="80%"
            />
            <el-table-column prop="industry" label="操作" width="200%">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="getData(scope.row)"
                >查询
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleClick(scope.row)"
                >获取
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <div class="box">
        <!--绘制k线图像-->
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ klineChartParams.name }}_{{ table_title }}</span>
            </div>
          </template>
          <el-table
            :data="stock_data"
            :show-header="true"
            :max-height="500"
            stripe
            :cell-style="cellStyle"
          >
            <el-table-column prop="tradingDate" label="时间" />
            <el-table-column
              prop="openingPrice"
              label="开盘价"
            />
            <el-table-column prop="changeRate" label="涨跌幅%" />
            <el-table-column
              prop="tradingVolume"
              label="成交量（手）"
            />
            <el-table-column
              prop="tradingAmount"
              label="成交额（元）"
            />
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { queryData, put } from '@/api/data'
import KlineChart from '@/components/Echarts/KlineChart.vue'

export default {
  components: { KlineChart },
  data() {
    return {
      update_status: '未开始',
      loading: true,
      table_title: '个股数据',
      // 沪深300成分股数据
      table_data: [],
      // 个股详细数据
      stock_data: [],
      showModal: false,
      klineChartParams: {
        name: '', code: ''
      },
      theme: 'macarons',
      changeRate: 3,
      aountMultiple: 2
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var url = 'api/tblKline/getPoolsInfo'
      var params = {}
      queryData(url, params).then(response => {
        this.table_data = response
      })
    },
    hideModal() {
      this.showModal = false
    },
    cellStyle({ row, column, rowIndex }) {
      if (row.changeRate > 0) {
        if (column.label === '涨跌幅%') {
          return { color: 'red' }
        }
      } else {
        if (column.label === '涨跌幅%') {
          return { color: 'green' }
        }
      }
    },
    // 获取数据
    getData(row) {
      var url = 'api/tblKline/getPoolsKlineInfo'
      this.klineChartParams.name = row.name
      this.klineChartParams.code = row.code
      queryData(url, this.klineChartParams)
        .then((response) => {
          this.stock_data = response
          this.loading = false
        })
        .catch((error) => {
          console.log(error)
          this.loading = false
        })
    },
    handleClick(row) {
      this.klineChartParams.name = row.name
      this.klineChartParams.code = row.code
      this.showModal = true
    },
    updateLongLetStock() {
      console.log('updateLongLetStock')
      var params = { 'changeRate': this.changeRate, 'aountMultiple': this.aountMultiple }
      put('/api/tblKline/updateLongLetStock', params).then((response) => {
        console.log('更新数据成功')
        this.init()
      })
        .catch((error) => {
          console.log(error)
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container {
  display: flex;
  justify-content: space-between; /* 两端对齐，使子元素平均分布在左右两侧 */
  align-items: center; /* 垂直居中，可选 */
  height: 100%; /* 设置为视口高度，使内容占据整个页面高度 */
  width: 100%; /* 设置为100%宽度，占据整个页面宽度 */
  padding: 0px 20px; /* 可选，添加内边距 */
  box-sizing: border-box; /* 包含内边距和边框在宽度计算中 */
}

.box {
  /* 为子元素设置基础样式，比如背景色和文本对齐 */
  flex: 1; /* 弹性因子设为1，使子元素平均分配空间 */
  text-align: center; /* 文本居中对齐，可选 */
  padding: 0px 20px; /* 添加内边距，可选 */
  box-sizing: border-box; /* 包含内边距和边框在宽度计算中 */
  width: 50%;
  min-height: 600px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 80% 透明度 */
  z-index: 9998; /* 确保遮罩层在模态框下方 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; /* 让遮罩层可点击 */
}

.modal {
  position: relative; /* 相对于遮罩层定位 */
  height: 520px; /* 高度自适应内容 */
  background-color: #fff; /* 白色背景 */
  border-radius: 10px; /* 可选，圆角 */
  z-index: 9999; /* 确保模态框在遮罩层上方 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 可选，阴影效果 */
}
</style>
